<template>
  <el-link :href="file.fileUrl" type="primary" target="_blank">
    <div style="text-align: center">
      <el-image :src="fileIcon" style="width: 30px;height: 30px"></el-image>
      <div>
        {{ file.fileName}}
      </div>
    </div>
  </el-link>
</template>

<script>
import File_Icon from '@/assets/file.png'
import Excel_Icon from '@/assets/excel.png'
import Word_Icon from '@/assets/word.png'
export default {
  name: 'FileView',
  props: {
    file: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    fileIcon() {
      if (['jpeg', 'gif', 'png'].indexOf(this.file.fileType) > -1) return File_Icon
      if (['xls', 'xlsx'].indexOf(this.file.fileType) > -1) return Excel_Icon
      if (['doc', 'docx'].indexOf(this.file.fileType) > -1) return Word_Icon
      return  File_Icon
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="scss">
</style>
